<template>
    <view class="columnbox content wdh-100">
        <view class="info-title" style="width: 100%;">提现金额</view>
        <view class="rowbox wdh-100 fls pricebox">
            <view>¥</view>
            <input v-model="price" type="digit" placeholder="请输入提现金额" />
        </view>
        <view class="wdh-100 moneybox">当前钱包余额{{money}}元，<text @click="price=money">全部提现</text> </view>
        <view class="rowbox one-info spb" @click="chooseAccount">
            <view class="info-title">提现账户</view>
            <view class="rowbox info-input reg-pl" v-if="account==''">
                请选择 <u-icon name="arrow-right" size="28rpx"></u-icon>
            </view>
            <view class="rowbox info-input reg-pl" v-else-if="account.state==1">
                <image src="/static/img/yl.png" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" mode="widthFix">
                </image>
                {{account.bank}} <u-icon name="arrow-right" size="28rpx"></u-icon>
            </view>
            <view class="rowbox info-input reg-pl" v-else-if="account.state==2">
                <image class="icon" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" src="/static/img/zfb.png"
                    mode="widthFix"></image>
                {{account.alipay}} <u-icon name="arrow-right" size="28rpx"></u-icon>
            </view>
        </view>
        <view class="rowbox onebtn def-bgcol" @click="getPrice">确定</view>
        <view class="noticebox columnbox" v-if="txbox">
            <view class="txbox columnbox">
                <view class="title" style="margin-top: 40rpx;">提现</view>
                <view class="pricebox" style="border: none;margin-bottom: 40rpx; ">¥{{price}}</view>
                <view class="rowbox wdh-100 spb oneinfo">
                    <view>提现账户</view>
                    <view class="rowbox">
                        <view v-if="account.state==1">
                            <image src="/static/img/yl.png" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"
                                mode="widthFix">
                            </image>
                        </view>
                        <view class="rowbox info-input reg-pl" v-else-if="account.state==2">
                            <image class="icon" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"
                                src="/static/img/zfb.png" mode="widthFix"></image>
                        </view>
                        <view v-if="account.state==1">{{account.bank}}</view>
                        <view v-else-if="account.state==2">{{account.alipay}}</view>
                    </view>
                </view>
                <view class="bottombox rowbox ">
                    <view class="rowbox" @click="txbox=false">取消</view>
                    <view v-if="loadingflag" class="rowbox">确认提现</view>
                    <view v-else class="def-col rowbox" @click="confirmWithdraw">确认提现</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                price: 0,
                money: 0,
                daozhang: 0,
                fuwufei: 0,
                title: '',
                txbox: false,
                name: '',
                loadingflag: false,
                yajin: 0,
                ktx: 0,
                account: ''
            };
        },
        computed: {
            user() {
                return this.$store.state.user
            },
            isLogin() {
                return this.$store.state.isLogin
            }
        },
        onLoad() {
            this.getInfo()
        },
        onShow() {

        },
        methods: {
            chooseAccount() {
                uni.navigateTo({
                    url: '/pages/wallet/withdrawAccount?from=withdraw'
                })
            },
            getInfo() {
                this.$req.post('/doctor/doctorinfo', {
                    doctorid: uni.getStorageSync('uid')
                }).then(res => {
                    this.money = res.data.data.xinchou
                })
            },
            getPrice() {
                if (this.price == 0) {
                    uni.showToast({
                        title: '请输入提现金额',
                        icon: 'none'
                    })
                } else if (this.account == '') {
                    uni.showToast({
                        title: '请选择提现账户',
                        icon: 'none'
                    })
                } else {
                    if (this.price > this.money) {
                        uni.showModal({
                            title: '余额不足'
                        })
                    } else {
                        this.txbox = true
                    }
                }
            },
            confirmWithdraw() {
                if (!this.loadingflag) {
                    this.loadingflag = true
                    if (this.account == '') {
                        uni.showToast({
                            title: '请选择提现账户',
                            icon: 'none'
                        })
                        this.loadingflag = false
                    } else {
                        uni.showLoading({
                            title: '正在提交',
                            mask: true
                        })
                        this.$req.post('/doctor/tixianadd', {
                            doctorid: uni.getStorageSync('uid'),
                            price: parseFloat(this.price),
                            bankid: this.account.id * 1
                        }).then(res => {
                            this.loadingflag = false
                            uni.hideLoading()
                            if (res.data.code == 0) {
                                this.txbox = false
                                uni.showModal({
                                    title: '申请成功，请等待审核',
                                    success() {
                                        uni.navigateBack()
                                    }
                                })
                            } else {
                                uni.showModal({
                                    title: res.data.msg
                                })
                            }
                        })
                    }
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        padding: 20rpx 40rpx;
        font-family: 'Roboto', sans-serif;
    }

    .title {
        font-size: 28rpx;
    }

    .pricebox {
        // font-weight: bold;
        font-size: 50rpx;
        color: #000;
        margin-top: 20rpx;
        border-bottom: #f0f3f2 solid 1px;

        input {
            line-height: 100rpx;
            margin-left: 20rpx;
            font-size: 50rpx;
            height: 100rpx;
        }
    }

    .moneybox {
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #5a5b5c;

        text {
            color: #20519f;
        }
    }

    .onebtn {
        width: 100%;
        color: #fff;
        border-radius: 10rpx;
        font-size: 28rpx;
        height: 90rpx;
        margin-top: 100rpx;
    }

    .noticebox {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        background: rgba(#000, 0.4);

        .txbox {
            background: #fff;
            border-radius: 20rpx;
            width: 570rpx;
            margin-bottom: 100rpx;
        }

        .oneinfo {
            padding: 10rpx 40rpx;
            font-size: 28rpx;
            color: #5a5b5c;
        }

        .notice {
            color: #fc1a07;
            font-size: 28rpx;
            margin-top: 20rpx;
        }

        .bottombox {
            border-top: #f0f3f2 solid 1px;
            width: 100%;
            margin-top: 20rpx;

            view {
                font-size: 28rpx;
                width: 49%;
                padding: 32rpx 0;
            }
        }

        .bottombox>view:nth-child(1) {
            color: #76767d;
            border-right: #f0f3f2 solid 1px;
        }
    }

    .name-box {
        border: #e6e9ec solid 1px;
        padding: 0 20rpx;
        border-radius: 10rpx;

        input {
            width: 250rpx;
            text-align: right;
            font-size: 28rpx;
            height: 70rpx;
        }
    }

    .notice-name {
        color: #d3252a;
        font-size: 22rpx;
        margin: 20rpx 0;
        width: 100%;
        text-align: center;
    }

    .info-title {
        // font-weight: bold;
        font-size: 26rpx;
        // color: #202020;
        width: 200rpx;
        margin-right: 20rpx;
    }

    .one-info {
        margin-top: 40rpx;
        width: 100%;
        padding: 20rpx 0;
        background: #fff;
        border-bottom: #F5F7F9 solid 1px;
        font-size: 26rpx;



        .info-input {
            text-align: right;
            font-size: 26rpx;
        }

        .code-box {
            width: calc(100% - 190rpx);
        }

        .code-input {
            text-align: left;
            font-size: 26rpx;
            width: 200rpx;
        }

        .code-btn {
            font-weight: bold;
        }
    }

    .reg-pl {
        color: #7a7b7e;
    }
</style>